<template>
  <el-row class="row">
    <!-- <input type="color" v-model="color"> -->
    <el-col :span="5" v-for="item in data" :key="item.id">
      <el-card shadow="hover" class="box-card" :style="{ backgroundColor: color }">
        <div>
          {{ item.content }}
        </div>
        <div>
          {{ item.data }}
        </div>
      </el-card>

    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref } from 'vue'
const data = [
  { id: 1, content: '用户数量', data: '100 人' },
  { id: 2, content: '销售量', data: '5656 件' },
  { id: 3, content: '销售额', data: '¥ 35620' },
  { id: 4, content: '评论量', data: '98989 条' },
]
let color = ref('#409eff')
// const http = getCurrentInstance()?.appContext.config.globalProperties.$http
// http.get('https://api.jiasiyuan.cn/news?page=1').then((res: any) => {
//   console.log(res);
// })
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  justify-content: space-around;
}

.box-card {
  text-align: center;
  color: #fff;
  height: 100px;
  padding: 20px;
  /* background-color: rgba(random(255), random(255), random(255), 0.8) */
}

:deep(.el-card__body) {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  >div:nth-child(1) {
    font-size: 1.2em;
  }
}
</style>